<template>
    <div class="wrapper">
        <title-decorate titleName="营收统计"/>
        <div class="my-chart" id="revenueStatisticsChart"></div>
    </div>
</template>

<script>
import TitleDecorate from "../../components/TitleDecorate.vue";
import * as echarts from "echarts";
import {BigScreen} from "../../datastore/BigScreen";

export default {
    components: {TitleDecorate},
    props: {},
    data() {
        return {
            charts_data: [
                ["product", "营收"],
            ]
        };
    },
    watch: {},
    computed: {},
    created() {
    },
    mounted() {
        var that = this;
        new BigScreen(this).getChargeTotal({}, (res) => {
            for (var i = 0; i < res.datas.length; i++) {
                that.charts_data.push(res.datas[i]);
            }
            that.drawEcharts();
        })
    },
    methods: {
        drawEcharts() {
            var that = this;
            var chartDom = document.getElementById("revenueStatisticsChart");
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                legend: {
                    align: "right",
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 11,
                    },
                    right: 20,
                    top: 10
                },
                tooltip: {},
                dataset: {
                    source: that.charts_data,
                },
                grid: {
                    top: 50,
                    bottom: 40,
                    right: 30,
                    left: 45,
                },
                xAxis: {
                    type: "category",
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#ffffff",
                        fontSize: 11,
                    },
                },
                yAxis: {
                    name: "单位：元",
                    nameLocation: "end",
                    nameTextStyle: {
                        color: "#ffffff",
                        fontSize: 11,
                        padding: 6
                    },
                    axisLabel: {
                        color: "#ffffff",
                        fontSize: 11,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#ffffff1a",
                        },
                    },
                },
                series: [
                    {
                        type: "bar",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: "#00EFFEFF"},
                                {offset: 1, color: "#00EFFE00"},
                            ]),
                        },
                    },
                    {
                        type: "bar",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: "#FCC348FF"},
                                {offset: 1, color: "#FCC34800"},
                            ]),
                        },
                    },
                ],
            };

            option && myChart.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .my-chart {
        width: 100%;
        flex: 1;
    }
}
</style>